<template>
	<view :style="skin" class="content cancelVerify">
		<u-alert :title="title" type="warning"></u-alert>
		<view class="cancelMain">

			<view class="verifyTips">
				<view class="title">
					请完成以下验证
				</view>
				<view class="verifyContent">
					请输入187****0030收到的短信验证码
				</view>
			</view>
			<view  style="margin-top: 15px;margin-bottom: 15px;">

				<u-input placeholder="后置插槽">
					<u--text text="短信验证" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>

					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>

				</u-input>


			</view>
			<view class="bottom">
				<u-button color="var(--subjectColor)" >确认注销
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				title: '*账户注销后，您无法正常登录，对应相关权益将同时全部作废',
				tips:'获取验证码'
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			change(e) {
				console.log('change', e);
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cancelVerify {

		.cancelMain {
			padding: 16px;
			box-sizing: border-box;
		}
	}
</style>